import React, {Component} from 'react';
import {Form, Input, Space, Button} from 'antd'
import TheTable from "../../../components/TheTable";
import TheButton from "../../../components/TheButton";
import {apiGetAboutUsList, apiGetAboutUsEdit, apiAboutUsAdd} from '@/request/configuration'
import TheDialog from "../../../components/TheDialog";
import TheQuill from "../../../components/TheQuill";
import Editor from "./component/editor";

class AboutUs extends Component {
    formRef = React.createRef();
    state = {
        loading: false,
        dataSource: null,
        columns: [
            {
                title: '序号',
                render: (text, record, index) => index + 1,
                width: 150,
                align: 'center'
            },
            {
                title: '问题标题',
                dataIndex: 'aboutUsTitle',
                key: 'aboutUsTitle',
                align: 'center'
            },
            {
                title: '操作',
                align: 'center',
                width: 200,
                render: record => {
                    return <TheButton haspermi={['set:about:update']}  onClick={() => this.editor("edit",record)}>修改</TheButton>
                }
            }
        ],
        initialValues: null,
        dialogStatus: false,
        title: null,
        btnLoading: false,
        type: null
    }

    async componentDidMount() {
        await this.getData()
    }

    getData = async () => {
        const data = await apiGetAboutUsList()
        this.setState({
            loading: true
        })
        if (data.code === 0) {
            this.setState({
                dataSource: data.data
            }, () => {
                this.setState({
                    loading: false
                })
            })
        } else {
            this.setState({
                loading: false
            })
        }
    }

    onFinish = async (value) => {
        const {initialValues, type} = this.state
        if(value.aboutUsDetailsImage === undefined || value.aboutUsDetailsImage === null ) {
          delete(value.aboutUsDetailsImage)
        }
        if(value.aboutUsDetailsScript === undefined || value.aboutUsDetailsScript === null ) {
          delete(value.aboutUsDetailsScript)
        }
        if(value.aboutUsDetails === undefined || value.aboutUsDetails === null ) {
          delete(value.aboutUsDetails)
        }
        this.setState({
            btnLoading: true
        })
        if(type === "add") {
          let res = await apiAboutUsAdd(value)
          if (res.code === 0) {
            this.setState({
                btnLoading: false
            }, async () => {
                await this.getData()
                await this.dialogCancel()
                React.$message({
                    type: 'info',
                    content: '新增成功'
                })
            })
        } else {
            this.setState({
                btnLoading: false
            })
        }
        }else {
          const data = await apiGetAboutUsEdit({...value, aboutUsId: initialValues.aboutUsId})
          if (data.code === 0) {
              this.setState({
                  btnLoading: false
              }, async () => {
                  await this.getData()
                  await this.dialogCancel()
                  React.$message({
                      type: 'info',
                      content: '修改成功'
                  })
              })
          } else {
              this.setState({
                  btnLoading: false
              })
          }
        }
    }

    editor = (type, value) => {
        this.setState({
            dialogStatus: true,
            title: type === "add" ? "新增文章" : '修改文章',
            type,
            initialValues: value
        })
    }

    dialogCancel = () => {
        this.setState({
            dialogStatus: false,
            title: ''
        })
    }
    /**
     * @desc 设置新闻内容表单默认值
     * */
    setNewsContent = (data) => {
        this.formRef.current.setFieldsValue({advertisingSpaceContent: data})
    }

    render() {
        const {loading, dataSource, columns, initialValues, dialogStatus, title, btnLoading, type} = this.state
        return <div className={"p-layout-box configuration"}>
          <div>
            <TheButton haspermi={['set:about:add']} size="middle" type="primary" onClick={() => this.editor("add", null)} >新增</TheButton>
          </div>
            <div className={"p-layout-content"}>
                <TheTable loading={loading} dataSource={dataSource} columns={columns}/>
            </div>
            <TheDialog
                visible={dialogStatus}
                title={title}
                width={800}
                handleCancel={this.dialogCancel}
                footer={null}
            >
                <Editor btnLoading={btnLoading} data={initialValues} type={type} onFinish={this.onFinish}
                        dialogCancel={this.dialogCancel}/>
            </TheDialog>
        </div>;
    }
}

export default AboutUs